<script lang="ts" setup>
    import { reactive, ref, computed, watch, onMounted } from 'vue';
    import { IconSwap } from '@arco-design/web-vue/es/icon';
    import { Message } from '@arco-design/web-vue';
    import { useRouter, useRoute} from 'vue-router';
    import API from '@/services';
    import {
        DATA_INTEGRATED_MODE, INTEGRATED_MODE_REVERSE, 
        MODE_OPTION, SWITCH_TIPS, PUSH_RATE,
        PUSH_RATE_CONNECTION, PUSH_RATE_CONNECTION_REVERSE} 
    from '@/constants/dataManage'
    import editImg from '@/assets/images/edit_img.svg';

    // import SwitchSelectMode from './switchSelect.vue'
    const props = defineProps({
        tableDetail: {
            type: Object
        }
    })
     const route = useRoute();
     let tableId = ref(route.query.id);

    
    const typeShow = ref<boolean>(true)
    const showIcon = ref<boolean>(false)
    const showEditIcon = ref<boolean>(false)

    // 切换集成方式时的提示
    const isShowTips = ref<boolean>(false)

    // 默认选中第一种集成方式
    const modelValue = ref<number|undefined>(1)

    // 推送频率
    const pushRateValue = ref<any>()

    const isEditSelect = ref<boolean>(true)

    const integratedMode = ref<number>()
    
    
     interface TypeModeI {
        dataBuldType: string;
        synTaskId: string | undefined;
        pushRate: string
    }

    const modeType = reactive<TypeModeI>({
        dataBuldType: '',
        synTaskId: undefined,
        pushRate: ''
    });
    // 切换
    const handleSwitchMode = () => {
        typeShow.value = false
        modelValue.value = INTEGRATED_MODE_REVERSE[modeType.dataBuldType]
    }
    // 取消
    const handleCancleMode = () => {
        typeShow.value = true
        showIcon.value = false

    }
    // 确定
    const handleSureMode = async () => {
        try {
            const {code, data} = await API.dataTable.postDataTableChangeDataBuildType({
                dataBuldType: modelValue.value,
                id: tableId.value as unknown as number
            })
            if (code === 200) {
                modeType.dataBuldType = DATA_INTEGRATED_MODE[modelValue.value || 1]
                integratedMode.value = modelValue.value
                modeType.pushRate = PUSH_RATE[0].label
                handleCancleMode()
                handlePushCancle()
            }
        } catch(error) {}
    }


    const visibleChange = (v:boolean) => {
        isShowTips.value = v
    }
    // 跳转到集成任务管理
    const handleToTaskManage = () => {

    }

    // 切换推送频率
    const handleSwitchPushRate = () => {
        isEditSelect.value = false
        pushRateValue.value = PUSH_RATE_CONNECTION_REVERSE[modeType.pushRate]
    }

    // 推送频率是否编辑状态确定
    
    const handlePushSure = async () => {
        try {
            const {code, data} = await API.dataTable.postDataTableChangeDataBuildType({
                pushRate: pushRateValue.value,
                id: tableId.value as unknown as number
            })
            if (code === 200) {
                modeType.pushRate = PUSH_RATE_CONNECTION[pushRateValue.value]
                handlePushCancle()
            }
        } catch(error) {}
    }
    // 取消
    const handlePushCancle = () => {
        isEditSelect.value = true
        showEditIcon.value = false
    }
    watch(() => props.tableDetail, (data: any) => {
       modeType.dataBuldType = DATA_INTEGRATED_MODE[data?.dataBuldType || 1] 
        integratedMode.value = data?.dataBuldType
        modeType.synTaskId = data?.synTaskId
        
        // 通过集成方式来推断是同步任务还是推送频率
        modeType.pushRate = data?.dataBuldType === 2 ? PUSH_RATE_CONNECTION[data?.pushRate || 1] : ''
    },{
      immediate: true
    }); 
</script>

<template>
        <div class="p-18 integrateMode">
            <span class="col_red">*</span>
            <span class="ml-6 col_333">集成方式：</span>
            <span v-if="typeShow" @mouseover="() => {
                showIcon = true
            }" 
            @mouseout="() => {
               showIcon = false 
            }">
                <span>{{modeType.dataBuldType}}</span>
                <span v-show="showIcon" @click="handleSwitchMode">
                    <icon-swap class="col_blue ml-6"/>
                    <span class="col_blue cp ml-2">切换</span>
                </span>
            </span>
            <span class="selectExatCont" v-else >
                <a-select
                    :style="{width:'320px'}" 
                    v-model="modelValue" 
                    @popup-visible-change="visibleChange">
                    <a-option v-for="item of MODE_OPTION" :label="item.label" :value="item.value">
                        <img class="va_m" :src="item.img" alt="">
                        {{item.label}}
                    </a-option>
                </a-select>
                <span class="ml-10 col_blue cp" @click="handleSureMode">确定</span>
                <span class="ml-10 col_9A9 cp" @click="handleCancleMode">取消</span>
            </span>
            <div class="mt-30">                           
                
                <div v-if="integratedMode===1">
                    <span class="col_red">*</span>
                    <span class="ml-6">同步任务：</span>
                    <span @mouseover="()=>{showEditIcon = true}" @mouseout="()=>{showEditIcon = false}">
                        <span class="ml-6 col_333" >{{modeType.synTaskId}}</span>
                        <span v-show="showEditIcon" @click="handleToTaskManage">
                            <img class="ml-6 va_m" :src="editImg" alt="">
                        </span>
                    </span>
                </div>
                <div v-else="integratedMode===2">
                    <span class="col_red">*</span>
                    <span class="ml-6">推送频率：</span>
                    <span v-if="isEditSelect" @mouseover="()=>{showEditIcon = true}" @mouseout="()=>{showEditIcon = false}">
                        <span class="ml-6 col_333" >{{modeType.pushRate}}</span>
                        <span v-show="showEditIcon" @click="handleSwitchPushRate">
                            <img class="ml-6 va_m" :src="editImg" alt="">
                        </span>
                    </span>
                    <span v-else>
                        <a-select 
                            :style="{width:'320px'}" 
                            v-model="pushRateValue" 
                            >
                            <a-option 
                                v-for="item of PUSH_RATE" 
                                :label="item.label" 
                                :value="item.value">
                                {{item.label}}
                            </a-option>
                        </a-select>
                        <span class="ml-10 col_blue cp" @click="handlePushSure">确定</span>
                        <span class="ml-10 col_9A9 cp" @click="handlePushCancle">取消</span>
                    </span>
                </div>
            </div>
        </div>
        <div class="warning-tips" v-show="isShowTips">
            <a-alert>{{SWITCH_TIPS}}</a-alert>
        </div>
</template>

<style lang="scss" scoped>
.warning-tips {
        position: relative;
        top: -40px;
        z-index: 9999;
        width: 314px;
        left: 470px;
        :deep(.arco-alert) {
            align-items: flex-start;
            .arco-alert-content {
                font-size: 12px;
                color: #33353B;
            }
        }
    }
</style>